<template>
	<view>
		<u-navbar class="navbar" :border-bottom="false" title="物流" :title-size="36" :title-bold="true" :title-color="textColor">
		</u-navbar>
		<view>
			<map style="width: 100%;height: 600rpx;" :latitude="latitude" :longitude="longitude" :markers="covers"></map>
		</view>
		<view class="footer" :style="{height: footerStyle.height}">
			<!-- 地址 -->
			<view class="box-color box-padding u-flex u-m-b-20">
				<view>
					<image src="/static/order/dizhi.png" style="width: 75rpx;height: 75rpx;" mode=""></image>
				</view>
				<view class="u-flex-col u-m-l-30" @click="$mRouter.push({ route: '/pages/sale/order/wuliu' })">
					<view class="u-font-32 u-m-b-16">
						LYING酒吧
					</view>
					<view class="u-font-28 u-m-b-10">
						刘颖 15142140678
					</view>
					<view class="u-font-24 grey-color">
						北京市朝阳区高碑店寰宇大厦
					</view>
				</view>
			</view>
			<!-- 进度 -->
			<view class="box-color box-padding u-m-b-20">
				<view class="u-flex u-row-between u-m-b-20">
					<view class="u-flex">
						<view style="font-size: 0;">
							<image src="/static/18.jpg" style="width: 120rpx;height: 120rpx;border-radius: 10rpx;" mode=""></image>
						</view>
						<view class="u-m-l-20 u-flex-col u-row-around" style="height: 120rpx;">
							<text class="u-font-30">灵魂判官100%金龙舌兰40%</text>
							<view class="u-flex">
								<view class="grey-box">
									40%vol  700ml/瓶
								</view>
								<view class="grey-box">
									x10
								</view>
							</view>
						</view>
					</view>
					<view @click="otherListShow = !otherListShow" >
						<text class="u-font-24 grey-color">等2件</text> <u-icon name="arrow-up" color="#999999" :class="{ 'u-arrow-down-icon-active': otherListShow }" class="u-arrow-down-icon"></u-icon>
					</view>
				</view>
				<view v-show="otherListShow" class="u-flex u-row-between u-m-b-20 ">
					<view class="u-flex">
						<view style="font-size: 0;">
							<image src="/static/18.jpg" style="width: 120rpx;height: 120rpx;border-radius: 10rpx;" mode=""></image>
						</view>
						<view class="u-m-l-20 u-flex-col u-row-around" style="height: 120rpx;">
							<text class="u-font-30">灵魂判官100%金龙舌兰40%</text>
							<view class="u-flex">
								<view class="grey-box">
									40%vol  700ml/瓶
								</view>
								<view class="grey-box">
									x10
								</view>
							</view>
						</view>
					</view>
				</view>
				<view>
					<ak-steps :list="stepList" direction="column" :active-color="themeColor" mode="dot"></ak-steps>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import AkSteps from '@/components/ak-steps/index.vue'
	export default {
		components: { AkSteps },
		data() {
			return {
				otherListShow: false,
				stepList: [
					{
						name: '待取货',
						time: ''
					},
					{
						name: '卖家已同意退货',
						time: '2021-08-31 16:26'
					},
					{
						name: '发起退货',
						time: '2021-08-31 14:22'
					}
				],
				goodsList: [
					{
						image: '/static/logo.png'
					}
				],
				id:0, // 使用 marker点击事件 需要填写id
				latitude: 39.907371,
				longitude: 116.536694,
				covers: [{
						latitude: 39.909054,
						longitude: 116.532338,
						iconPath: '/static/order/yidongdian.png'
				}, {
						latitude: 39.907371,
						longitude: 116.536694,
						iconPath: '/static/order/mudidi.png'
				}],
				footerStyle: {
					height: undefined
				}
			}
		},
		onReady: function(res) {
			// var _this = this;
			uni.getSystemInfo({
				success: (resu) => {
					const query = uni.createSelectorQuery()
					query.select('.footer').boundingClientRect()
					query.exec((res) => {
						this.footerStyle.height = resu.windowHeight - res[0].top + 'px';
					})
				},
				fail: (res) => {}
			})
		},
		methods: {
			markertap() {
				console.log(1)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.footer {
		overflow-y: scroll;
	}
	.u-arrow-down-icon {
		transition: all 0.3s;
		margin-left: 20rpx;
	}
	.u-arrow-down-icon-active {
		transform: rotate(180deg);
		transform-origin: center center;
	}
</style>
